<template>
    <div class="screen_block_box flex-column">
        <h2 class="header">运维问题统计</h2>
        <div class="question_chart" ref="question_pie"></div>
    </div>
</template>
<script>
import resize from '@/mixins/resize';
import echarts from 'echarts';
import {remoteQuestionStatistics} from '@/api/home'

export default {
    name: 'QuestionPie',
    mixins: [resize],
    props: {
        info: {
            type: Object,
            default: () => {}
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initEchart();
        });
    },
    methods: {
        async initEchart() {
            let res = await remoteQuestionStatistics();
            let {data}=res;
            let colors = [
                {
                    color: 'rgba(50,123,250,0.7)',
                    borderColor: 'rgba(50,123,250,1)', 
                },
                {
                    color: 'rgba(244,201,7,0.7)',
                    borderColor: 'rgba(244,201,7,1)',
                },
                {
                    color: 'rgba(23,216,161,0.7)',
                    borderColor: 'rgba(23,216,161,1)',
                },
                {
                    color: 'rgba(122,60,235,0.7)',
                    borderColor: 'rgba(122,60,235,1)',
                },
                {
                    color: 'rgba(15,197,243,0.7)',
                    borderColor: 'rgba(15,197,243,1)',
                },
                {
                    color: 'rgba(240,128,128,0.7)',
                    borderColor: 'rgba(240,128,128,1)',
                }
            ]
            let showData = []
            data.map((item,index)=>{
                let {typeName,cnt} = item;
                showData.push({
                    value: cnt,
                    name: typeName,
                    itemStyle: {
                        color: colors[index].color,
                        borderColor: colors[index].borderColor,
                        borderWidth: 2
                    }
                })
            })
            this.myChart = echarts.init(this.$refs.question_pie);

            this.myChart.setOption(
                {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    grid: {
                        left: 0,
                        right:0,
                        top:0,
                        bottom: 20,
                        containLabel: true
                    },
                    series: [
                        {
                            name: '运维问题',
                            type: 'pie',
                            radius: ['30%', '70%'],
                            center: ['50%', '50%'],
                            roseType: 'radius',
                            label: {
                                show: true,
                                normal: {
                                    position: 'outside',
                                    fontSize: 12
                                }
                            },
                            labelLine: {
                                length: 1,
                                length2: 10,
                                smooth: true
                            },
                            data: showData
                        }
                    ]
                },
                true
            );
        }
    }
};
</script>
<style lang="scss" scoped>
.question_chart {
    width: 100%;
    height: 100%;
}
</style>